<template>
  <vo-table ref="voTable" :data="data.tableData">
    <template #leftBar>
      <tiny-form :inline="true" class="demo-form-inline" label-position="left" v-model="searchForm">
        <tiny-form-item label="执行器" label-width="50px">
          <vo-select default select dictCode="jobExcetor" v-model:value="data.searchForm.spaceId" />
        </tiny-form-item>
        <tiny-form-item>
          <tiny-form-item label="名称" label-width="40px">
            <tiny-input v-model="data.searchForm.ruleName" placeholder="规则名称"></tiny-input>
          </tiny-form-item>

          <tiny-button type="primary" @click="queryBook">查询</tiny-button>
        </tiny-form-item>
      </tiny-form>
    </template>
    <template #rightBar>
      <tiny-button-group>
        <tiny-button type="primary" @click="addRule"> 新增</tiny-button>
        <tiny-button type="primary" @click="delBatch">删除</tiny-button>
      </tiny-button-group>
    </template>
    <template v-slot:formateOnline="{row}">
      <tiny-button type="text"  v-if="row.exector">
        查看( {{ row.exector }} )</tiny-button>
    </template>

    <template v-slot:handleSlot="{row}">
      <tiny-button-group class="ml-4" style="display: inline-flex">
        <tiny-button text type="success" size="mini" @click="editBtn(row)">编辑 </tiny-button>
        <tiny-button text type="danger" size="mini" @click="delMenu(row)">删除</tiny-button>
      </tiny-button-group>
    </template>
  </vo-table>
</template>

<script setup>
  import {ref, reactive, onMounted, getCurrentInstance} from 'vue';
  let {proxy} = getCurrentInstance();
  const data = reactive({searchForm: {}, tableData: {data: [], cols: [], tableArrts: {}}});

  data.tableData.cols = [
    {type: 'index'},
    {title: '执行系统', key: 'appName', width: 220, align: 'left', tooltip: true},
    {title: '执行器名称', key: 'title', width: 220, align: 'left', tooltip: true},
    {title: '注册方式', key: 'addressType', width: 120, align: 'left', edit: {editor: false, type: 'select', attrs: {}}, dictCode: 'taskAddressType'},
    {title: '在线机器地址', key: 'addressList',width: 120, align: 'left', slot: 'formateOnline'},
    {title: '操作', slot: 'handleSlot', width: 250},
  ];

  onMounted(()=>{
   query()
  })
  const query=()=>{
    proxy.$api.taskJob.queryJobGroupInfo(data.searchForm).then(res => {
      data.tableData.data = res; //更新数据
    });
    }

  // data.tableData.data = [{id: '1', jobDesc: '测试', jobGroup: '执行器', scheduleType: '', glueType: '', author: 'xx', triggerStatus: '1'}];
  const star = row => {
    alert('启动' + row.id);
  };
  // 启动一次
  const exceOneTime = rows => {
    alert(rows.id);
  };
</script>
<style lang="scss" scoped>
  .demo-form-inline {
    .tiny-form-item {
      margin-bottom: 0 !important;
    }
  }
</style>
